<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.num" placeholder="产品编号" style="width: 150px;" class="filter-item" />
      <el-input v-model="listQuery.name" placeholder="产品名称" style="width: 150px;" class="filter-item" />
      <el-select v-model="listQuery.supplyId" placeholder="供应商" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in supplies" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.warehouseId" placeholder="仓库名称" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in warehouses" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter(listQuery)">
        搜索
      </el-button>
      <el-button class="filter-item" type="success" icon="el-icon-refresh-left" @click="handleReset(listQuery)">
        重置
      </el-button>
    </div>

    <el-table :data="tableData" stripe max-height="600">
      <el-table-column prop="id" label="产品编号" />
      <el-table-column prop="name" label="产品名称" />
      <el-table-column prop="proType" label="产品类别" />
      <el-table-column prop="proNum" label="出库数量" />
      <el-table-column prop="proSupName" label="产品供应商" />
      <el-table-column prop="wareId" label="仓库号" />
      <el-table-column prop="wareAddr" label="仓库地址" />
      <el-table-column prop="wareTel" label="仓库联系人" />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click.native.prevent="deleteRow(scope.$index, tableData[scope.$index])"
          >
            出库
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>
<script>
import { outwareAll, outWarePro } from '@/api'
import Pagination from '@/components/Pagination'

export default {
  name: 'ExWarehouse',
  components: {
    Pagination
  },
  data() {
    return {
      listQuery: {
        num: '', // 产品编号
        name: '', // 产品名称
        supplyId: '', // 供应商id
        warehouseId: '', // 仓库id
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined
      },
      supplies: [
        {
          id: '111',
          name: '阿里'
        }
      ],
      warehouses: [
        {
          id: '111',
          name: '1号仓库'
        }
      ],
      tableData: [],
      total: 100
    }
  },
  created() {
    this.outWare()
  },
  methods: {
    // 筛选
    handleFilter(listQuery) {
      console.log('筛选' + listQuery.num)

      // 有问题
      outwareAll({ proId: listQuery.num, proName: listQuery.name, supId: listQuery.supplyId, wareId: listQuery.warehouseId }).then(res => {
        console.log(res)
        this.tableData = res.data
        if (res.data.length < 1) {
          this.$message('没有找到这个商品')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 重置
    handleReset(listQuery) {
      console.log('重置')
     listQuery == null
    },
    // 出库列表
    outWare() {
      outwareAll().then(res => {
        this.tableData = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 出库
    deleteRow(index, row) {
      console.log('出库' + row.id)
      outWarePro({ id: row.id }).then(res => {
        console.log(res)
        let idx
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].id === row.id) {
            idx = i
            break
          }
        }
        this.tableData.splice(idx, 1)
      }).catch(err => {
        console.log(err)
      })
    },

    // 分页事件
    getList() {
      console.log('分页事件')
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //
      //   // Just to simulate the time of the request
      //   setTimeout(() => {
      //     this.listLoading = false
      //   }, 1.5 * 1000)
      // })
    }
  }

}
</script>
